常用生命周期钩子函数
componentDidMount  挂载成功
componentDidUpdate  更新完毕
componentWillUnmount 即将卸载

触发组件进入更新阶段的三个条件: 
1. 父组件更新
2. 调用了setState 
3. 调用forceUpdate 


组件通讯: 

props 自上而下, 父组件传给子组件, 逐级传递
context  自上而下, 跨级传递(所有的子级组件都能获取到)  props和context都是react技术
pubsub-js 不在乎组件的嵌套结构,可以随意传递 pubsub-js不是react技术


context的使用: 
1. 创建context对象 
// const context = React.createContext('默认值') // 保证传收数据使用的是同一个context, 默认值是在不写Provider的时候生效
2. 在传递数据的组件中,使用context.Provider 
render(){
    return <context.Provider value={要传递的数据}>
        <div></div>
    </context.Provider>
}
3. 在接收数据的组件中,使用context.Consumer或contextType 

3.1 Consumer 
render(){
    return <context.Consumer>
        {(data)=>{
            return <h1>123</h1>
        }}
    </context.Consumer>
}

3.2 contextType 

class Test extends Component {
    static contextType = context对象
    render(){
        this.context 获取数据
        return <h1>123</h1>
    }
}

pubsub-js 

订阅: 

const token = PubSub.subscribe('话题', (话题,数据)=>{

}) 返回当前订阅的唯一标识

发布: 

PubSub.publish('话题', 数据)

清除订阅: 

PubSub.unsubscribe(token)
PubSub.unsubscribe(话题)
PubSub.clearAllSubscriptions()


性能优化

减轻state 

state里面只存储跟页面渲染有关的数据


shouldComponentUpdate 

是组件生命周期钩子函数 

执行时机: 是在组件的更新阶段 

触发条件: 1. 父组件更新  2. 调用了setState  

特点: shouldComponentUpdate需要写返回值,返回值是true,则组件继续更新渲染. 如果返回值是false,则组件不会更新


一般如果要使用shouldComponentUpdate的话,就会在函数体中,判断所有的props数据和所有的state数据,最新的和之前的是否相同. 如果这些数据中,有一个数据的新旧值不同,则组件要更新. 
所以我们就需要在shouldComponentUpdate中拿到最新的props和state, 以及上一次的props和state 

旧: this.state this.props
新: shouldComponentUpdate(nextProps,nextState)